<template>
  <div class="form-datetime">
    <bbx-timezone-time-picker
      :id="`form_${field.fieldName}`"
      :value="bindTime"
      :field="field"
      :is-edit="true"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="timestamp"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      @input="choose"
      @confirm="choose"
    >
    </bbx-timezone-time-picker>
  </div>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue';
import BbxTimezoneTimePicker from '@src/component/Bbx/TimezoneTimePicker'
import FormMixin from '@src/component/form/mixin/form';
import { getTimestamp } from 'pub-bbx-utils';

export default defineComponent({
  name: 'FormDatetime',
  components: {
    BbxTimezoneTimePicker,
  },
  mixins: [FormMixin],
  props: {
    value: {
      type: [String, Number],
      default: null,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update', 'input'],
  setup(props, { emit }){
    const bindTime = ref(null)
    watchEffect(() => {
      bindTime.value = props.value ? getTimestamp(props.value) : null
    })

    function choose(newValue){
      const {value: oldValue, field} = props
      const upData = {
        newValue,
        oldValue,
        field
      }

      emit('update', upData);
      emit('input', newValue);
    }

    return {
      bindTime,
      choose,
    }
  },
})
</script>

<style lang="scss">
.form-datetime {
  width: 100%;

  .el-input__inner {
    cursor: pointer;
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>
